<template>
  <div class="menue_box">
      <el-menu
        class="el-menu-vertical-demo"
        background-color="transparent"
        text-color="#fff"
        :default-active="currentRouter"
        router
      >
        <div v-for="v in menueTree" :key="v.id">
          <!-- 一级菜单 -->
          <template v-if="!v.children">
            <el-menu-item :index="v.path">
              <i :class="v.meta.icon"></i>{{ v.name }}
            </el-menu-item>
          </template>
          <!-- 多级菜单 -->
          <el-submenu v-else :index="v.id">
            <template slot="title">
              <i :class="v.meta.icon"></i>{{ v.name }}
            </template>
            <template v-for="child in v.children">
              <!-- 这里是递归循环 -->
              <sideMeuns
                v-if="child.children && child.children.length > 0"
                :key="child.path"
              />
              <el-menu-item v-else :key="child.id" :index="child.path">{{
                child.name
              }}</el-menu-item>
            </template>
          </el-submenu>
        </div>
      </el-menu>
  </div>
</template>
<script>
export default {
  name: "sideMeuns",
  data() {
    return {
      menueTree: "",
      currentRouter: "/" //当前选中的菜单
    };
  },

  mounted() {
    this.menueTree = this.$store.state.navList.children;
    this.currentRouter = this.$route.path;
  }
};
</script>

<style>
</style>